<template>
  <el-row :gutter="20">
    <el-col :offset="6" :span="12">
      <el-divider content-position="left">{{ `${inOrUp ? '添加' : '修改'}` }}菜单</el-divider>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :offset="8" :span="8">
      <el-form ref="menuRef" :rules="rules" :model="form" label-width="130px">
        <el-form-item label="菜单名" prop="menu">
          <el-input v-model="form.menu" />
        </el-form-item>
        <el-form-item label="菜单路由名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="菜单路由" prop="url">
          <el-input v-model="form.url" />
        </el-form-item>
        <el-form-item label="是否是菜单" prop="isMenu">
          <el-radio-group v-model="form.isMenu" class="ml-4">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否存在父级菜单">
          <el-switch v-model="haveFatherMenu" @change="haveFatherMenuChange" />
        </el-form-item>
        <el-form-item label="父级菜单" prop="fatherMenuid" v-show="haveFatherMenu">
          <el-select v-model="form.fatherMenuid" placeholder="请选择父级菜单">
            <el-option v-for="menu in menuStore.menuLevel" :label="menu.menu" :value="menu.menuid" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(menuRef)">提交</el-button>
          <el-button @click="resetForm(menuRef)">清空</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :offset="6" :span="12">
      <el-divider content-position="left">删除菜单</el-divider>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :offset="4" :span="16">
      <el-table :data="menuStore.menuLevel" height="250" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="menuid" label="菜单ID" width="70px" />
        <el-table-column prop="menu" label="菜单名" />
        <el-table-column prop="name" label="URL名称" />
        <el-table-column prop="url" label="URL" />
        <el-table-column prop="isMenu" label="是否是底层菜单">
          <template #default="scope">
            <el-text v-show="scope.row.isMenu">是</el-text>
            <el-text v-show="!scope.row.isMenu">否</el-text>
          </template>
        </el-table-column>
        <el-table-column prop="fatherMenuid" label="父级菜单ID" />
        <el-table-column prop="isFree" label="是否激活">
          <template #default="scope">
            <el-switch v-model="scope.row.isFree" @change="isFreeChange(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="updateMenu(scope.row)">修改</el-button>
            <el-button link type="danger" size="small" @click="deleteMenuTip(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <el-dialog v-model="centerDialogVisible" title="删除菜单提示" width="25%" center>
    <span>
      确定删除 <strong>{{ deleteMenu.menu }}</strong> 菜单吗？
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteMenuHandler(false)">取消</el-button>
        <el-button type="danger" @click="deleteMenuHandler(true)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Menu } from '@/types/menu';
import { onBeforeMount, reactive, ref } from 'vue';
import { useMenuStore } from '@/stores/menuStore'
import { ordObj } from "@/utils/util"
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';

// 表单数据
const form = reactive<Menu>({
  menu: '',
  name: '',
  url: '',
  isMenu: true,
  menuList: []
})
const menuRef = ref<FormInstance>()
const rules = reactive<FormRules<Menu>>({
  menu: [
    { required: true, message: '请输入菜单名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度限制在[3-10]', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入菜单路由名', trigger: 'blur' },
    { min: 4, max: 20, message: '长度限制在[4-20]', trigger: 'blur' }
  ],
  url: [
    { required: true, message: '请输入菜单路由', trigger: 'blur' },
    { min: 1, max: 20, message: '长度限制在[4-20]', trigger: 'blur' }
  ],
  isMenu: [
    { required: true, message: '', trigger: 'change' }
  ]
})
// 是否存在父级菜单
const menuStore = useMenuStore()
const haveFatherMenu = ref<boolean>(false)
// let menuLists = reactive<Array<Menu>>([]);
onBeforeMount(() => {
  menuStore.levelMenu()
})
const haveFatherMenuChange = () => {
  if (!haveFatherMenu.value) form.fatherMenuid = ''
}

// 提交按钮
const inOrUp = ref<Boolean>(true)
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid: any) => {
    if (!valid) return
    if (haveFatherMenu.value && !form.fatherMenuid) {
      ElMessage({
        dangerouslyUseHTMLString: true,
        message: '<strong><i>父级菜单</i> 不能为空</strong>',
        type: 'error'
      })
      return
    }
    if (inOrUp.value) {
      menuStore.addMenu(ordObj(form))
    } else {
      menuStore.updateMenu(ordObj(form))
    }
    resetForm(formEl)
  })
}

// 清空按钮
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  haveFatherMenu.value = false
  inOrUp.value = true
}

//==========修改、删除菜单============
const tableRowClassName = ({
  row
}: {
  row: Menu
}) => {
  if (!row.isFree) {
    return 'warning-row'
  }
}
const isFreeChange = (menu: Menu): void => {
  menuStore.updateMenu(menu)
}
// 修改菜单
const updateMenu = (menu: Menu): void => {
  form.menuid = menu.menuid
  form.menu = menu.menu
  form.name = menu.name
  form.url = menu.url
  form.isFree = menu.isFree
  form.isMenu = menu.isMenu
  form.menuList = menu.menuList
  form.fatherMenuid = menu.fatherMenuid
  if (!!form.fatherMenuid) {
    haveFatherMenu.value = true
  } else {
    haveFatherMenu.value = false
  }
  inOrUp.value = false
}
// 删除菜单
const deleteMenu = reactive<Menu>({
  menu: '',
  name: '',
  url: '',
  isMenu: true,
  menuList: []
})
// 删除菜单提示框
const centerDialogVisible = ref<boolean>(false)
const deleteMenuTip = (menu: Menu): void => {
  if (!menu.menuid) {
    ElMessage({
      dangerouslyUseHTMLString: true,
      message: '<strong><i>菜单ID</i> 不能为空</strong>',
      type: 'error'
    })
    return
  }
  deleteMenu.menuid = menu.menuid
  deleteMenu.menu = menu.menu
  centerDialogVisible.value = true
}
const deleteMenuHandler = (x?: Boolean): void => {
  if (x) {
    menuStore.deleteMenu(deleteMenu.menuid)
  }
  deleteMenu.menuid = ''
  deleteMenu.menu = ''
  centerDialogVisible.value = false
}
</script>
<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>